<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>论文检索系统</title>

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
          integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

    <style>
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }

        body {
            background: darkred;
        }

        .row {
            background: white;
            border-radius: 30px;
            box-shadow: 12px 12px 22px darkred;
        }

        img {
            border-top-left-radius: 30px;
            border-bottom-left-radius: 30px;
        }

        .btn1 {
            border: none;
            outline: none;
            height: 50px;
            width: 100%;
            background-color: black;
            color: white;
            border-radius: 4px;
            font-weight: bold;
        }

        .btn1:hover {
            background: white;
            border: 1px solid;
            color: black;
        }
    </style>
</head>

<body>
    <section class="Form my-4 mx-5">
        <div class="container">
            <div class="row row-no-gutters">
                <div class="col-lg-5" style="margin-top: 100px;">
                    <img src="images/Shannon.jpeg">
                </div>
                <div class="col-lg-7 px-5 pt-5">
                    <h1 class="font-weight-bold py-3">论文检索系统</h1>
                    <h4>Sign into your account</h4>
                    <form class="form-horizontal" name="loginForm" method="post" th:action="@{/login}"
                          onsubmit="return isNull();">
                        <div class="form-row">
                            <div class="col-lg-7">
                                <input type="text" name="name" placeholder="用户名" class="form-control my-3 p-4">
                            </div>
                        </div>
                        <div class="form-row">
                            <div class="col-lg-7">
                                <input type="password" name="pwd" placeholder="******" class="form-control my-3 p-4">
                            </div>
                        </div>
                        <div style="display: flex">
                            <div class="col-lg-5">
                                <input type="text" name="checkcode" placeholder="验证码" class="form-control my-3 p-4">
                            </div>
                            <div style="width: 200px; height: 80px; margin-top: 10px;">
                                <a href="javascript:" onclick="document.getElementById('checkcode').src = '/checkcode?'
                                + (new Date()).getTime()"><img th:src="@{/checkcode}" id="checkcode" class="img1"/></a>
                            </div>
                        </div>
                        <div class="form-row" th:switch="${session.errorCode}">
                            <select name="loginer">
                                <option value="user">普通用户</option>
                                <option value="admin">系统管理员</option>
                            </select>
                            <p th:case="'3'" style="color: red; margin-top: 5px;">验证码不正确</p>
                            <p th:case="'2'" style="color: red; margin-top: 5px;">用户不存在</p>
                            <p th:case="'1'" style="color: red; margin-top: 5px;">密码错误</p>
                        </div>
                        <div class="form-row">
                            <div class="col-lg-7">
                                <button type="submit" class="btn1 mt-3 mb-5">Login</button>
                            </div>
                        </div>
                        <p>Don't have an accout?<a class="register" th:href="@{/registerPage}">Regitser here</a></p>
                    </form>
                </div>
            </div>
        </div>
    </section>
</body>

<script>
    function isNull() {
        if (loginForm.name.value === "" || loginForm.pwd.value === "" || loginForm.checkcode.value === "") {
            alert("请完整填写所有内容");
            return false;
        }
    }
</script>

</html>